<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="inc/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <%@ include file="inc/meta.jsp" %>
    <meta name="description" content="">
    <meta name="author" content="">
    <title>添加视频</title>
    <%@ include file="inc/css.jsp" %>
</head>
<body>

<div id="videos" class="wrapper">

    <%@ include file="inc/nav.jsp" %>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">视频列表</h1>
                <h4 style="margin-left: 10px;">——添加视频</h4>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <form id="infoForm" method="post" action="company/video/save" class="form-horizontal" role="form" enctype="multipart/form-data">

                            <div class="form-group">
                                <label class="col-sm-2 control-label">视频名称:</label>

                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="name" name="name" maxlength="20" data-rule="required" placeholder="请输入视频名称"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">视频封面:</label>

                                <div class="col-sm-4" style="padding-top: 6.5px;">
                                    <input type="file" name="cover" id="mainImage" style="display:none;"/>
                                    <a href="javascript:void(0);" onclick="_companyVideoInfo.fn.AddImg()">
                                        <img id="mainPicture" src="static/images/add.jpg" style="height: 200px; width: 200px; display: inline; margin-bottom: 5px;" border="1"/>
                                    </a>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">视频分类:</label>

                                <div class="col-sm-4" style="padding-top: 1.5px;">
                                    <select class="form-control" id="videoTypeList" name="videoTypeId" style="width: 200px;"></select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">投放形式:</label>

                                <div class="col-sm-4" style="padding-top: 1.5px;">
                                    <select class="form-control" id="sendTypeList" name="sendType" style="width: 200px;">
                                        <option value="1">一般形式</option>
                                        <option value="2">红包形式</option>
                                        <option value="3">其他形式</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">视频简介:</label>

                                <div class="col-sm-8" style="padding-top: 6.5px;">
                                    <textarea class="form-control" style="resize: none" id="synopsis" name="synopsis" cols="40" rows="8"></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">视频文件:</label>

                                <div class="col-sm-8" style="padding-top: 6.5px;">
                                    <input type="file" id="sourceFile" name="file" accept="video/*"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-12" style="text-align: center">
                                    <a href="javascript:void(0)" onclick="_companyVideoInfo.fn.subInfo()" class="btn btn-success" role="button">上传视频</a>
                                    <a href="company/video/index" class="btn btn-primary" role="button">返回</a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.panel-body -->

                </div>
            </div>
        </div>

    </div>
    <!-- /#page-wrapper -->

    <div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="pwdModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">提示</h4>
                </div>
                <div class="modal-body">
                    <span id="showSpanText">上传成功！</span>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="_companyVideoInfo.fn.toList()" class="btn btn-primary">返回</button>
                    <button type="button" onclick="_companyVideoInfo.fn.toAddInfo()" class="btn btn-success">继续上传</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

</div>
<!-- /#wrapper -->

<%@ include file="inc/footer.jsp" %>

</body>

<script type="text/javascript">
    var _companyVideoInfo = {
        fn: {
            init: function () {
                //套图主图预览
                $("#mainImage").uploadPreview({
                    Img: "mainPicture",
                    Width: 200,
                    Height: 170
                });

                _companyVideoInfo.fn.getSelectList();
            },
            subInfo: function () {
                var flag = true;
                var name = $('#name').val();
                var url = $('#mainPicture').prop('src');
                var videoTypeId = $('#videoTypeList option:selected').val();
                var synopsis = $('#synopsis').val();
                var sourceFile = $('#sourceFile').val();

                if (null == name || name == '') {
                    $leoman.notify("请输入视频名称", "error");
                    flag = false;
                    return;
                }

                if (null == url || url == '' || url == _basePath + 'static/images/add.jpg' || url == 'static/images/add.jpg') {
                    $leoman.notify("请上传视频封面", "error");
                    flag = false;
                    return;
                }

                if (null == videoTypeId || videoTypeId == '') {
                    $leoman.notify("请选择视频分类", "error");
                    flag = false;
                    return;
                }

                if (null == synopsis || synopsis == '') {
                    $leoman.notify("请输入视频简介", "error");
                    flag = false;
                    return;
                }

                if (null == sourceFile || sourceFile == '') {
                    $leoman.notify("请选择视频文件", "error");
                    flag = false;
                    return;
                }

                // 所有的验证通过后，执行新增操作
                if (flag) {
                    $('#infoReduceDialogModal').modal({backdrop: 'static', keyboard: false});
                    $('#infoReduceDialogModal').modal("show");

                    $("#infoForm").ajaxSubmit({
                        url: _basePath + "company/video/save",
                        dataType: "json",
                        success: function (result) {
                            $('#infoReduceDialogModal').modal("hide");
                            if (result > 0) {
                                $('#showSpanText').html('上传成功！');
                            } else if (result == -200) {
                                $('#showSpanText').html('请上传正确的视频文件，上传失败！');
                            } else if (result == -100) {
                                $('#showSpanText').html('视频时长不能超过5分钟，上传失败！');
                            } else {
                                $('#showSpanText').html('上传失败！');
                            }
                            $('#successModal').modal("show");
                        }
                    });
                }
            },
            AddImg: function () {
                // a标签绑定onclick事件
                $('#mainImage').click();
            },
            getSelectList: function () {
                $leoman.ajax("common/videoTypeList", null, function (result) {
                    if (null != result) {
                        var content = "<option value=''>请选择分类</option>";
                        jQuery.each(result, function (i, item) {
                            content += "<option value='" + item.id + "'>" + item.name + "</option>";
                        });
                        $('#videoTypeList').append(content);
                    } else {
                        $leoman.notify("获取分类信息失败", "error");
                    }
                });
            },
            toAddInfo: function () {
                window.location.href = '${contextPath}/company/video/show';
            },
            toList: function () {
                if ($('#showSpanText').html() == '上传成功！') {
                    window.location.href = '${contextPath}/company/video/index';
                } else {
                    $('#successModal').modal("hide");
                }
            }
        }
    }

    $(document).ready(function () {
        _companyVideoInfo.fn.init();
    });

</script>

</html>